<!DOCTYPE html><html lang="zh-CN"><head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五神鸟 - 神鸟传说</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
  <link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&amp;family=ZCOOL+XiaoWei&amp;display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/lxgw-wenkai-webfont@1.1.0/style.css" rel="stylesheet">
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    
    body {
      background: linear-gradient(135deg, #0a1a35 0%, #000000 100%);
      color: #f0f0f0;
      font-family: 'LXGW WenKai', 'Noto Sans SC', sans-serif;
      overflow-x: hidden;
    }
    
    .nav-glass {
      background: rgba(0, 0, 0, 0.7);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
    }
    
    .logo-glow {
      filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.7));
    }
    
    .hero-title {
      font-family: 'ZCOOL XiaoWei', 'Ma Shan Zheng', serif;
      color: #d4af37;
      text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.5);
      animation: glowPulse 4s infinite alternate;
    }
    
    @keyframes glowPulse {
      0% { text-shadow: 0 0 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(212, 175, 55, 0.5); }
      100% { text-shadow: 0 0 30px rgba(212, 175, 55, 0.9), 0 0 60px rgba(212, 175, 55, 0.7); }
    }
    
    .btn-gold-gradient {
      background: linear-gradient(45deg, #d4af37, #f9e076, #d4af37);
      background-size: 200% auto;
      color: #0a1a35;
      font-weight: bold;
      transition: 0.5s;
    }
    
    .btn-gold-gradient:hover {
      background-position: right center;
      transform: translateY(-3px);
      box-shadow: 0 10px 20px rgba(212, 175, 55, 0.3);
    }
    
    .btn-outline-gold {
      border: 2px solid #d4af37;
      color: #d4af37;
      transition: all 0.3s ease;
    }
    
    .btn-outline-gold:hover {
      background: rgba(212, 175, 55, 0.1);
      transform: translateY(-3px);
    }
    
    .divider-gold {
      height: 1px;
      background: linear-gradient(90deg, transparent, #d4af37, transparent);
    }
    
    .divider-circuit {
      height: 200px;
      background-image: url('/mb-potato/image/placeholder.svg');
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      position: relative;
    }
    
    .divider-circuit::before, 
    .divider-circuit::after {
      content: '';
      position: absolute;
      top: 0;
      height: 2px;
      background: linear-gradient(90deg, transparent, currentColor, transparent);
    }
    
    .divider-circuit::before { 
      width: 100%; 
      background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.9), transparent); 
    }
    
    .divider-circuit::after {
      bottom: 0;
      top: auto;
    }
    
    .nav-secondary {
      position: sticky;
      top: 0;
      background: rgba(10, 26, 53, 0.8);
      border-top: 1px solid rgba(212, 175, 55, 0.5);
      border-bottom: 1px solid rgba(212, 175, 55, 0.5);
      transition: all 0.3s ease;
      z-index: 40;
    }
    
    .nav-secondary.fixed {
      position: fixed;
      top: 60px;
      width: 100%;
      backdrop-filter: blur(6px);
    }
    
    .bird-icon {
      transition: all 0.3s ease;
      padding: 10px 16px;
      border-radius: 30px;
    }
    
    .bird-icon.active {
      background: rgba(0, 0, 0, 0.4);
      position: relative;
      box-shadow: 0 0 15px rgba(255, 100, 100, 0.3);
    }
    
    .bird-icon.active::before {
      content: '';
      position: absolute;
      top: 0;
      right: -1px;
      height: 100%;
      width: 8px;
      background: linear-gradient(180deg, rgba(200, 60, 60, 0.7) 0%, rgba(200, 60, 60, 0.3) 100%);
      border-top-right-radius: 30px;
      border-bottom-right-radius: 30px;
    }
    
    .card {
      position: relative;
      padding: 60px 0;
      min-height: 100vh;
      display: flex;
      align-items: center;
    }
    
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 20px;
      opacity: 0.1;
      z-index: -1;
    }
    
    .card-zhuque::before {
      background: linear-gradient(135deg, #c83c3c 0%, #7a0b0b 100%);
    }
    
    .card-qingluan::before {
      background: linear-gradient(135deg, #50c8b4 0%, #0d5c4f 100%);
    }
    
    .card-jinwu::before {
      background: linear-gradient(135deg, #d4af37 0%, #7a5d0b 100%);
    }
    
    .card-bifang::before {
      background: linear-gradient(135deg, #d45f37 0%, #7a2d0b 100%);
    }
    
    .card-xuanniao::before {
      background: linear-gradient(135deg, #5f37d4 0%, #2d0b7a 100%);
    }
    
    .feature-icon {
      background: rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(212, 175, 55, 0.2);
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
    }
    
    .feature-text {
      flex: 1;
      padding-left: 15px;
    }
    
    .hologram-container {
      position: relative;
      width: 100%;
      max-width: 500px;
      height: 450px;
      border-radius: 20px;
      overflow: hidden;
      perspective: 1000px;
      transform-style: preserve-3d;
    }
    
    .hologram-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at center, rgba(212, 175, 55, 0.1) 0%, transparent 70%);
      z-index: 1;
    }
    
    .symbol-overlay {
      position: absolute;
      opacity: 0;
      filter: drop-shadow(0 0 10px rgba(255, 100, 100, 0.6));
      transition: opacity 0.5s ease;
    }
    
    .hologram-container:hover .symbol-overlay {
      opacity: 1;
    }
    
    .to-top {
      position: fixed;
      right: 30px;
      bottom: 30px;
      width: 50px;
      height: 50px;
      background: rgba(212, 175, 55, 0.2);
      backdrop-filter: blur(4px);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transition: all 0.3s ease;
      z-index: 100;
    }
    
    .to-top.active {
      opacity: 1;
      visibility: visible;
    }
    
    .banner {
      min-height: 80vh;
      width: 100%;
      position: relative;
      background-image: url('/mb-potato/image/placeholder.svg');
      background-size: cover;
      background-position: center center;
      display: flex;
      flex-direction: column;
    }
    
    .banner::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(to bottom, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.3) 30%, transparent 60%, transparent 100%);
      z-index: 1;
    }
    
    .active-indicator {
      position: absolute;
      height: 3px;
      background: #d4af37;
      bottom: 0;
      transition: all 0.3s ease;
    }
    
    .slide-in {
      opacity: 0;
      transform: translateY(30px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .slide-in.animate {
      opacity: 1;
      transform: translateY(0);
    }
    
    .slide-left {
      opacity: 0;
      transform: translateX(-50px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .slide-left.animate {
      opacity: 1;
      transform: translateX(0);
    }
    
    .slide-right {
      opacity: 0;
      transform: translateX(50px);
      transition: opacity 0.6s ease, transform 0.6s ease;
    }
    
    .slide-right.animate {
      opacity: 1;
      transform: translateX(0);
    }
  </style>
</head>
<body>
  <!-- 背景粒子效果 -->
  <div class="fixed inset-0 z-0" id="particles"></div>
  
  <!-- 导航栏 -->
  <header class="nav-glass fixed top-0 w-full py-3 z-50 transition-all duration-300">
    <div class="container mx-auto px-6 flex justify-between items-center">
      <!-- Logo -->
      <div class="flex items-center">
        <iconify-icon class="logo-glow" icon="fa6-solid:feather-pointed" width="42" height="42" style="color: #d4af37"></iconify-icon>
        <h1 class="ml-3 text-xl font-bold text-white font-['ZCOOL_XiaoWei']">五神鸟</h1>
      </div>
      <!-- 导航链接 -->
      <nav class="relative">
        <ul class="flex space-x-8">
          <li class="relative">
            <a href="首頁.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">首页</a>
          </li>
          <li class="relative">
            <a href="#" class="text-white hover:text-d4af37 transition-colors relative py-2">神鸟传说</a>
            <div class="nav-active-indicator w-full" style="width: 100%;"></div>
          </li>
          <li class="relative">
            <a href="科技神韻界面.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">科技互动</a>
          </li>
          <li class="relative">
            <a href="文化传承.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">文化传承</a>
          </li>
          <li class="relative">
            <a href="关于我们.html" class="text-gray-300 hover:text-d4af37 transition-colors py-2">关于我们</a>
          </li>
        </ul>
      </nav>
      <!-- 右侧操作 -->
      <div class="flex items-center space-x-4">
        <div class="relative">
          <iconify-icon class="text-gray-300 hover:text-d4af37 cursor-pointer" icon="ion:search" width="24"></iconify-icon>
        </div>
        <!-- <button class="btn-outline-gold px-4 py-1 rounded-full text-sm flex items-center">
          <iconify-icon icon="ion:language" class="mr-1"></iconify-icon> 中文
        </button> -->
      </div>
    </div>
  </header>
  
  <!-- Banner区 -->
  <section class="banner relative">
    <div class="container mx-auto px-6 py-24 relative z-10 flex-grow flex flex-col justify-center items-center">
      <h1 class="hero-title text-5xl md:text-7xl text-center leading-tight">
        神鸟传说
      </h1>
      <div class="divider-gold w-56 my-6 mx-auto"></div>
      <p class="hero-subtitle text-xl text-center text-gray-300 opacity-90 max-w-2xl">
        穿越千年的神话与信仰
      </p>
    </div>
    
    <!-- 二级导航 -->
    <div class="nav-secondary pt-4 pb-3" id="secondaryNav">
      <div class="container mx-auto px-6">
        <div class="flex justify-center space-x-2">
          <a href="#zhuque" class="bird-icon text-white text-center active" data-bird="zhuque">
            <div class="mb-2 mx-auto">
              <iconify-icon icon="noto:phoenix" width="36" style="color: #c83c3c"></iconify-icon>
            </div>
            <div>鹪明</div>
          </a>
          <a href="#qingluan" class="bird-icon text-gray-300 text-center" data-bird="qingluan">
            <div class="mb-2 mx-auto">
              <iconify-icon icon="twemoji:peacock" width="36" style="color: #50c8b4"></iconify-icon>
            </div>
            <div>幽昌</div>
          </a>
          <a href="#jinwu" class="bird-icon text-gray-300 text-center" data-bird="jinwu">
            <div class="mb-2 mx-auto">
              <iconify-icon icon="noto-v1:sun" width="36" style="color: #d4af37"></iconify-icon>
            </div>
            <div>发明</div>
          </a>
          <a href="#bifang" class="bird-icon text-gray-300 text-center" data-bird="bifang">
            <div class="mb-2 mx-auto">
              <iconify-icon icon="noto:bird" width="36" style="color: #d45f37"></iconify-icon>
            </div>
            <div>鹔鹴</div>
          </a>
          <a href="#xuanniao" class="bird-icon text-gray-300 text-center" data-bird="xuanniao">
            <div class="mb-2 mx-auto">
              <iconify-icon icon="noto:bat" width="36" style="color: #5f37d4"></iconify-icon>
            </div>
            <div>凤凰</div>
          </a>
        </div>
      </div>
    </div>
  </section>
  
  <!-- 鹪明介绍 -->
  <section id="zhuque" class="card card-zhuque">
    <div class="container mx-auto px-6 flex flex-col md:flex-row items-center gap-10">
      <div class="flex-1 slide-left" style="max-width: 600px">
        <h2 class="hero-title text-4xl mb-4 text-red-300">鹪明·心灵疗愈师</h2>
        <div class="text-amber-300 font-medium mb-6">亦称：焦朋、焦明</div>
        
        <div class="space-y-4 text-gray-300 mb-8">
          <p class="pb-4 border-b border-gray-700 slide-in">
            五方神鸟之一，南方朱雀之属 ，五行主火，象征蓬勃之夏与火之热烈。在古代神话传说里，鹪明是品德高尚、吉祥如意的象征，其身姿优雅，代表着南方的灵秀与祥瑞之气。
          </p>
          <p>现代人设：灵性通透的心灵疗愈师，手持月光编织宁静。她能用旋律抚平都市焦虑，以温柔低语唤醒沉睡的情感共鸣，让破碎灵魂在清辉中获得重生之力。</p>
          <p class="slide-in">
            历史记载：《史记》中有“鹪明似凤，非幽闲不集，非珍物不食”。 在古代文学与神话体系中，鹪明常被视作高洁、祥瑞的化身，其出现预示着太平盛世、贤明之主在位。
          </p>
        </div>
        
        <div class="space-y-4 slide-in">
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="game-icons:fire" width="24" style="color: #c83c3c"></iconify-icon>
            </div>
            <div class="feature-text">五行属性：火</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="map:south" width="24" style="color: #c83c3c"></iconify-icon>
            </div>
            <div class="feature-text">方位象征：南方正位</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:heart-fire" width="24" style="color: #c83c3c"></iconify-icon>
            </div>
            <div class="feature-text">性格特质：高雅不凡，祥瑞平和</div>
          </div>
        </div>
        
        <button class="btn-outline-gold px-6 py-2 rounded-full mt-8 slide-in flex items-center">
          <iconify-icon icon="ion:headset" width="24" class="mr-2"></iconify-icon> 聆听传说
        </button>
      </div>
      
      <div class="flex-1 flex justify-center mt-10 md:mt-0">
        <div class="hologram-container slide-right">
          <img src="焦明.jpg" id="1" alt="Holographic projection of mythical red bird" class="w-full h-full object-contain">
          
          <img src="https://modao.cc/ai/uploads/ai_pics/20/203778/aigp_1756830493.jpeg" id="1-flame" alt="Magical flame symbols" class="symbol-overlay absolute top-20 left-16 max-w-20 opacity-80" style="max-width: 60px; transform: rotate(-15deg);">
          <img src="https://modao.cc/ai/uploads/ai_pics/20/203779/aigp_1756830495.jpeg" id="1-star" alt="Southern constellations representation" class="symbol-overlay absolute bottom-20 right-16 max-w-20 opacity-80" style="max-width: 70px; transform: rotate(15deg);">
        </div>
      </div>
    </div>
  </section>
  
  <!-- 分隔图 -->
  <div class="divider-circuit" data-next-bg="qingluan-bg" style="background-color:#0d5c4f;"></div>
  
  <!-- 幽昌介绍 -->
  <section id="qingluan" class="card card-qingluan">
    <div class="container mx-auto px-6 flex flex-col md:flex-row-reverse items-center gap-10">
      <div class="flex-1 slide-right" style="max-width: 600px">
        <h2 class="hero-title text-4xl mb-4 text-cyan-300">幽昌·哲学思辨者</h2>
        <div class="text-amber-300 font-medium mb-6">亦称：苍鸾、青鸟、鸾鸟</div>
        
        <div class="space-y-4 text-gray-300 mb-8">
          <p class="pb-4 border-b border-gray-700 slide-in">
            五方神鸟之一，对应北方，五行属水，象征寒冷的冬季与水的深沉、静谧。在古代神话传说中，幽昌是守护与庇佑之鸟，代表着深沉的智慧与坚韧的力量。其羽毛乌黑发亮，犹如夜幕下的深邃寒水，振翅间带着神秘而庄重的气息。
          </p>
          <p>现代人设：深邃敏锐的哲学思辨者，于无声处听惊雷。他隐匿于都市阴影中洞察人心，擅长解构一切表象直指本质，是能用一句话撼动你世界观的思想隐士。</p>
          <p class="slide-in">
            历史记载：《乐协图征》 中有 “四曰幽昌，锐目，小头，大身，细足，胫若鳞叶，身智，戴信，负礼，膺仁，至则旱之感也 ” 。从外形上刻画了幽昌 “锐目，小头，大身，细足，胫若鳞叶” 的特征 ，还赋予了它 “身智，戴信，负礼，膺仁” 等品德属性。
          </p>
        </div>
        
        <div class="space-y-4 slide-in">
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:leaf" width="24" style="color: #50c8b4"></iconify-icon>
            </div>
            <div class="feature-text">五行属性：水</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="map:east" width="24" style="color: #50c8b4"></iconify-icon>
            </div>
            <div class="feature-text">方位象征：北方正位</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:music" width="24" style="color: #50c8b4"></iconify-icon>
            </div>
            <div class="feature-text">性格特质：深沉内敛，忠诚坚定</div>
          </div>
        </div>
        
        <button class="btn-outline-gold px-6 py-2 rounded-full mt-8 slide-in flex items-center">
          <iconify-icon icon="ion:headset" width="24" class="mr-2"></iconify-icon> 聆听传说
        </button>
      </div>
      
      <div class="flex-1 flex justify-center mt-10 md:mt-0">
        <div class="hologram-container slide-left">
          <img src="悠长46.png" id="2" alt="Blue mythical phoenix with extended tail feathers" class="w-full h-full object-contain">
        </div>
      </div>
    </div>
  </section>
  
  <!-- 分隔图 -->
  <div class="divider-circuit" data-next-bg="jinwu-bg" style="background-color:#7a5d0b;"></div>
  
  <!-- 发明介绍 -->
  <section id="jinwu" class="card card-jinwu">
    <div class="container mx-auto px-6 flex flex-col md:flex-row items-center gap-10">
      <div class="flex-1 slide-left" style="max-width: 600px">
        <h2 class="hero-title text-4xl mb-4 text-amber-300">发明·天才工程师</h2>
        <div class="text-amber-300 font-medium mb-6">亦称：青鸾、苍凤</div>
        
        <div class="space-y-4 text-gray-300 mb-8">
          <p class="pb-4 border-b border-gray-700 slide-in">
            五方神鸟之一，代表东方，五行属木，象征着万物生发的春季，以及木之生机与活力。在古代神话观念里，发明是孕育希望、催生新生的神鸟，它的出现预示着新的机遇与蓬勃的发展，其身姿灵动，周身散发着蓬勃向上的气息。
          </p>
          <p>现代人设：理性至上的天才工程师，坚信万物皆可重构。他将世界视为待优化的代码，用精准算法与冰冷金属铸造未来，眼中闪烁着解构万物的真理之光。</p>
          <p class="slide-in">
            历史记载：《人镜经》中有：“凡五方之鸟皆似凤，而非也。东方发明，全身总青。”  此外，在一些古代的纬书和志怪小说中，发明神鸟降临之处，草木更加繁茂，人们也会迎来新的生机与希望。在古代占星文化中，发明代表着智慧启迪与生命繁衍，其形象常见于文房器物与春耕祭祀礼器装饰。
          </p>
        </div>
        
        <div class="space-y-4 slide-in">
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:gold" width="24" style="color: #d4af37"></iconify-icon>
            </div>
            <div class="feature-text">五行属性：木</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="map:center" width="24" style="color: #d4af37"></iconify-icon>
            </div>
            <div class="feature-text">方位象征：东方正位</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:weather-sunny" width="24" style="color: #d4af37"></iconify-icon>
            </div>
            <div class="feature-text">性格特质：灵动活泼，充满生机</div>
          </div>
        </div>
        
        <button class="btn-outline-gold px-6 py-2 rounded-full mt-8 slide-in flex items-center">
          <iconify-icon icon="ion:headset" width="24" class="mr-2"></iconify-icon> 聆听传说
        </button>
      </div>
      
      <div class="flex-1 flex justify-center mt-10 md:mt-0">
        <div class="hologram-container slide-right">
          <img src="发明.jpg" id="3" alt="Golden three-legged bird representing the sun" class="w-full h-full object-contain">
        </div>
      </div>
    </div>
  </section>
  
  <!-- 分隔图 -->
  <div class="divider-circuit" data-next-bg="bifang-bg" style="background-color:#7a2d0b;"></div>
  
  <!-- 鹔鹴介绍 -->
  <section id="bifang" class="card card-bifang">
    <div class="container mx-auto px-6 flex flex-col md:flex-row-reverse items-center gap-10">
      <div class="flex-1 slide-right" style="max-width: 600px">
        <h2 class="hero-title text-4xl mb-4 text-orange-300">鹔鹴·顶尖运动员</h2>
        <div class="text-amber-300 font-medium mb-6">亦称：肃爽、鹔鷞​</div>
        
        <div class="space-y-4 text-gray-300 mb-8">
          <p class="pb-4 border-b border-gray-700 slide-in">
            五方神鸟之一，代表西方，五行属金，象征着万物收敛的秋季，以及金之刚正与肃杀。在古代神话体系中，鹔鹴是执掌正义、明辨是非的神鸟，它的出现寓意着世间秩序井然、公正不阿，其身姿挺拔，周身散发着威严凛然的气息。​
          </p>
          <p>现代人设：无畏坚毅的顶尖运动员，挑战极限只为超越自我。他以钢铁般的意志和无尽的耐力，征服每一寸赛道，用汗水铸就荣耀，用坚持诠释信念。</p>
          <p class="slide-in">
            历史记载：《说文解字》中有 “西方鹔鹴，东方发明，南方焦明，北方幽昌，中央凤凰” 的明确记载 。此外，《礼记・礼运》也提及 “前鹔鹴而后幽昌”，将其与四方神鸟并列，凸显其在古代神鸟体系中的重要地位；在一些占星文献中鹔鹴的形象还常与西方七宿关联，被视为守护西方方位的祥瑞之兆。​
          </p>
        </div>
        
        <div class="space-y-4 slide-in">
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:fire-alert" width="24" style="color: #d45f37"></iconify-icon>
            </div>
            <div class="feature-text">五行属性：金</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="map:northwest" width="24" style="color: #d45f37"></iconify-icon>
            </div>
            <div class="feature-text">方位象征：西方正位</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:alert" width="24" style="color: #d45f37"></iconify-icon>
            </div>
            <div class="feature-text">性格特质：刚正不阿，威严凛然</div>
          </div>
        </div>
        
        <button class="btn-outline-gold px-6 py-2 rounded-full mt-8 slide-in flex items-center">
          <iconify-icon icon="ion:headset" width="24" class="mr-2"></iconify-icon> 聆听传说
        </button>
      </div>
      
      <div class="flex-1 flex justify-center mt-10 md:mt-0">
        <div class="hologram-container slide-left">
          <img src="骕骦6.png" id="4" alt="Mystical crane-like bird with a single leg" class="w-full h-full object-contain">
        </div>
      </div>
    </div>
  </section>
  
  <!-- 分隔图 -->
  <div class="divider-circuit" data-next-bg="xuanniao-bg" style="background-color:#2d0b7a;"></div>
  
  <!-- 凤凰介绍 -->
  <section id="xuanniao" class="card card-xuanniao">
    <div class="container mx-auto px-6 flex flex-col md:flex-row items-center gap-10">
      <div class="flex-1 slide-left" style="max-width: 600px">
        <h2 class="hero-title text-4xl mb-4 text-purple-300">凤凰·先锋艺术家</h2>
        <div class="text-amber-300 font-medium mb-6">亦称：丹鸟、火鸟、鶤鸡、威凤</div>
        
        <div class="space-y-4 text-gray-300 mb-8">
          <p class="pb-4 border-b border-gray-700 slide-in">
            凤凰是中央的神鸟象征，五行属土。是中国古代传说中的百鸟之王，在中华文化中的地位和龙相同。其羽毛一般被描述为五彩，“凤”为雄性，“凰”为雌性，常作为兴国祥瑞的图徽。它有着鸡头、燕颔、蛇颈、龟背、鱼尾的独特外形，高约六尺，还有屋脊蹲兽的形象呈现。在传统文化中，它集合了德、顺、义、信、仁“五德”，是祥瑞的最高代表，象征着天下太平、万物和谐。
          </p>
          <p>现代人设：炽热不羁的先锋艺术家，以火焰为画笔，废墟为画布。他崇尚破坏性创造，在颠覆传统中追寻美学的涅槃重生，用灼热作品点燃观者内心的反叛之火。</p>
          <p class="slide-in">
            历史记载：《尚书·益稷》载“箫韶九成，凤皇来仪”，描绘了凤凰在韶乐声中降临，象征着政通人和的盛世景象。《山海经·南山经》记载“有鸟焉，其状如鸡，五采而文，名曰凤皇” ，点明凤凰五彩斑斓的外形。
          </p>
        </div>
        
        <div class="space-y-4 slide-in">
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:water" width="24" style="color: #5f37d4"></iconify-icon>
            </div>
            <div class="feature-text">五行属性：土</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="map:north" width="24" style="color: #5f37d4"></iconify-icon>
            </div>
            <div class="feature-text">方位象征：中央正位</div>
          </div>
          <div class="flex items-center">
            <div class="feature-icon">
              <iconify-icon icon="mdi:star-four-points" width="24" style="color: #5f37d4"></iconify-icon>
            </div>
            <div class="feature-text">性格特质：仁德宽厚，端庄祥瑞</div>
          </div>
        </div>
        
        <button class="btn-outline-gold px-6 py-2 rounded-full mt-8 slide-in flex items-center">
          <iconify-icon icon="ion:headset" width="24" class="mr-2"></iconify-icon> 聆听传说
        </button>
      </div>
      
      <div class="flex-1 flex justify-center mt-10 md:mt-0">
        <div class="hologram-container slide-right">
          <img src="凤凰4255.png" id="5" alt="Mythical black bird with cosmic wings" class="w-full h-full object-contain">
        </div>
      </div>
    </div>
  </section>
  
  <!-- 页脚 -->
  <footer class="py-12 border-t border-amber-900 relative z-10">
    <div class="container mx-auto px-6">
      <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
        <div>
          <div class="flex items-center mb-6">
            <iconify-icon icon="fa6-solid:feather-pointed" width="32" style="color: #d4af37"></iconify-icon>
            <h3 class="text-xl font-bold ml-2">五神鸟</h3>
          </div>
          <p class="text-gray-400 text-sm leading-relaxed">
            以现代科技演绎传统文化，打造文化传承新体验，传统与未来的创新实验室。
          </p>
        </div>
        
        <div>
          <h4 class="text-amber-200 text-lg mb-4 pb-2 border-b border-amber-800">探索之旅</h4>
          <ul class="text-gray-400 space-y-2">
            <li><a href="神鳥傳説界面.html" class="hover:text-amber-200 transition-colors">神鸟传说</a></li>
            <li><a href="AI交互.html" class="hover:text-amber-200 transition-colors">互动知识图谱</a></li>
            <li><a href="VR探索.html" class="hover:text-amber-200 transition-colors">VR时空穿梭</a></li>
            <li><a href="数字神鸟珍藏馆.html" class="hover:text-amber-200 transition-colors">数字收藏馆</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-amber-200 text-lg mb-4 pb-2 border-b border-amber-800">关于团队</h4>
          <ul class="text-gray-400 space-y-2">
            <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">项目起源</a></li>
            <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">创意伙伴</a></li>
            <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">心路历程</a></li>
            <li><a href="团队信息.html" class="hover:text-amber-200 transition-colors">未来构想</a></li>
          </ul>
        </div>
        
        <div>
          <h4 class="text-amber-200 text-lg mb-4 pb-2 border-b border-amber-800">关注我们</h4>
          <p class="text-gray-400 text-sm mb-4">
            获取最新展览信息、活动公告和独家内容更新
          </p>
          <div class="flex space-x-4">
            <a class="social-icon w-10 h-10 flex items-center justify-center rounded-full border border-amber-700 bg-black/60" href="https://mp.weixin.qq.com/s/Gd91N-0lKqXblMExLEWIxw">
              <iconify-icon icon="mdi:wechat" width="24" style="color: #d4af37"></iconify-icon>
            </a>
            <a class="social-icon w-10 h-10 flex items-center justify-center rounded-full border border-amber-700 bg-black/60" href="https://weibo.com">
              <iconify-icon icon="mdi:weibo" width="24" style="color: #d4af37"></iconify-icon>
            </a>
            <a class="social-icon w-10 h-10 flex items-center justify-center rounded-full border border-amber-700 bg-black/60" href="#">
              <iconify-icon icon="mdi:tiktok" width="24" style="color: #d4af37"></iconify-icon>
            </a>
          </div>
          <div class="mt-6">
            <p class="text-gray-400 text-sm mb-2">邮箱: info@wushenniao.com</p>
            <p class="text-gray-400 text-sm">电话: +86 10 8888 7777</p>
          </div>
        </div>
      </div>
      
      <div class="divider-gold w-full my-10"></div>
      
      <div class="text-center text-gray-500 text-sm">
        © 2025 五神鸟文化科技项目 | 用呈现思维连接过去与未来 | 传统文化与科技融合的创新平台
      </div>
    </div>
  </footer>
  
  <!-- 返回顶部按钮 -->
  <button class="to-top" id="toTop">
    <iconify-icon icon="ion:arrow-up" width="24" style="color: #d4af37"></iconify-icon>
  </button>
  
  <script>
    // 创建背景粒子效果
    function createParticles() {
      const container = document.getElementById('particles');
      const particleCount = 30;
      
      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.classList.add('particle');
        
        const size = Math.random() * 4 + 1;
        const posX = Math.random() * 100;
        const posY = Math.random() * 100;
        const animationDuration = Math.random() * 10 + 15;
        
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;
        particle.style.left = `${posX}%`;
        particle.style.top = `${posY}%`;
        particle.style.animationDuration = `${animationDuration}s`;
        particle.style.opacity = Math.random() * 0.6 + 0.2;
        
        container.appendChild(particle);
      }
    }
    
    // 导航透明效果
    function handleNavOpacity() {
      const header = document.querySelector('header');
      const scrollPosition = window.scrollY;
      
      if (scrollPosition > 50) {
        header.style.background = 'rgba(0, 0, 0, 0.85)';
      } else {
        header.style.background = 'rgba(0, 0, 0, 0.7)';
      }
    }
    
    // 二级导航固定效果
    function fixSecondaryNav() {
      const secondaryNav = document.getElementById('secondaryNav');
      const heroHeight = document.querySelector('.banner').offsetHeight;
      const scrollPosition = window.scrollY;
      
      if (scrollPosition > heroHeight - 60) {
        secondaryNav.classList.add('fixed');
      } else {
        secondaryNav.classList.remove('fixed');
      }
    }
    
    // 激活当前神鸟导航
    function activateBirdNav() {
      const sections = document.querySelectorAll('section[id]');
      const navItems = document.querySelectorAll('.bird-icon');
      let currentId = '';
      
      sections.forEach(section => {
        const sectionTop = section.offsetTop;
        const sectionHeight = section.offsetHeight;
        const scrollPosition = window.scrollY + (window.innerHeight / 2);
        
        if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
          currentId = section.id;
        }
      });
      
      navItems.forEach(item => {
        item.classList.remove('active', 'text-white');
        item.classList.add('text-gray-300');
        
        if (item.getAttribute('data-bird') === currentId) {
          item.classList.add('active', 'text-white');
          item.classList.remove('text-gray-300');
        }
      });
    }
    
    // 返回顶部按钮
    function handleScrollToTop() {
      const toTopBtn = document.getElementById('toTop');
      const heroRect = document.querySelector('.banner').getBoundingClientRect();
      
      if (window.scrollY > heroRect.height * 0.5) {
        toTopBtn.classList.add('active');
      } else {
        toTopBtn.classList.remove('active');
      }
      
      toTopBtn.addEventListener('click', () => {
        window.scrollTo({
          top: 0,
          behavior: 'smooth'
        });
      });
    }
    
    // 添加滚动动画
    function animateOnScroll() {
      const elements = document.querySelectorAll('.slide-in, .slide-left, .slide-right');
      
      elements.forEach(el => {
        const elTop = el.getBoundingClientRect().top;
        const windowHeight = window.innerHeight;
        
        if (elTop < windowHeight * 0.9) {
          el.classList.add('animate');
        }
      });
    }
    
    // 平滑滚动到锚点
    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
      anchor.addEventListener('click', function(e) {
        e.preventDefault();
        
        const targetId = this.getAttribute('href');
        const target = document.querySelector(targetId);
        
        if (target) {
          window.scrollTo({
            top: target.offsetTop - 100,
            behavior: 'smooth'
          });
        }
      });
    });
    
    // 初始化
    document.addEventListener('DOMContentLoaded', () => {
      createParticles();
      window.addEventListener('scroll', () => {
        handleNavOpacity();
        fixSecondaryNav();
        activateBirdNav();
        handleScrollToTop();
        animateOnScroll();
      });
      
      // 初始执行一次
      handleScrollToTop();
      animateOnScroll();
    });
  </script>

</body></html>